<template>
	<div class="content">
		<h1>招聘列表</h1>
		<div class="NewBtn">
			<el-button type="primary" @click='Add'>新增职业</el-button>
		</div>
		<div class="TableBox">
			<table class="tab">
				<tr>
					<th>地区</th>
					<th>职位</th>
					<th>学历</th>
					<th>经验</th>
					<th>薪资</th>
					<th>标签</th>
					<th>人数</th>
					<th>操作</th>
				</tr>
				<tr v-for="val in tableData">
					<td>{{val.address}}</td>
					<td>{{val.name}}</td>
					<td>{{val.education}}</td>
					<td>{{val.experience}}</td>
					<td>{{val.price}}</td>
					<td>{{val.property_string}}</td>
					<td>{{val.people}}</td>
					<td>
						<el-dropdown>
							<el-button type="primary">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item><div @click='Edit(val.id)'>编辑</div></el-dropdown-item>
								<el-dropdown-item><div @click='Rise(val.orders)'>上升</div></el-dropdown-item>
								<el-dropdown-item><div @click='Decline(val.orders)'>下降</div></el-dropdown-item>
								<el-dropdown-item><div @click='Delete(val.id)'>删除</div></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</td>
				</tr>
			</table>
		</div>
		<div class="PageBox">                                                                              <!--:current-page = "ispage"绑定当前页-->
			<el-pagination background layout="prev, pager, next" :total="count" @current-change="Change" :current-page = "ispage"></el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			Add(){
				this.$router.push({
					path:'/addRecruit'
				})
			},			
			Edit(id){
				console.log(id);
				console.log(this.page)
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.get(baseUrl+"/jobs/find",{
					params:{//get请求传后台数据需要pararms				
						id:id
					}
				},{
					headers:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{					
					console.log("请求成功",res);	
					 this.$router.push({name:"Edit",query:{
					 	res:res,
					 	page:this.page+1
					 }})
				}).catch((err)=>{
					console.log("请求失败",err);
				});
			},
			
			
			
			//删除
			Delete(id){
				console.log(id);
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl+"/jobs/delete",{//$require不能用params
					id:id
				},{
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log("请求成功",res);
					this.getList(this.page);		
				}).catch((err)=>{
					console.log("请求失败",err);
				});
				
			},
			
			//升序
			Rise(orders){
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl+'/jobs/sort',{
					move: 1 ,
					orders:orders
				},{
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log("请求成功",res);
					this.getList(this.page);	
				}).catch((err)=>{
					console.log("请求失败",err)
				})
			},
			
			//降序
			Decline(orders){
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl+'/jobs/sort',{
					move: -1 ,
					orders:orders
				},{
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log("请求成功",res);
					this.getList(this.page);	
				}).catch((err)=>{
					console.log("请求失败",err)
				})
			},
			getList(page){
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.get(baseUrl + "/jobs/list",{
					params:{
						page:this.page
					}
				}).then((res) => {
					console.log(res)
					this.tableData = res.data.data.rows
					console.log(this.tableData)	
					this.count = res.data.data.count;
					console.log(this.count)
				})
			},
			Change(e){
				console.log(e);
				this.page = e - 1;
				this.getList(this.page);
			}
		},
		data() {
			return {
				tableData: [],
				count:1,
				page:0,
				ispage:1
			}
		},
		created() {
			this.getList(this.page);
			this.ispage =this.$route.query.page
		}
	}
</script>

<style lang="scss" scoped="scoped">
	$htitle:32px; //标题文字大小
	.content {
		width: 100%;
		margin: 0 auto;
		padding:0 30px;
		.NewBtn {
			margin-top: 20px;
		}
		h1 {
		font-size: $htitle;
		margin: 21px 0;
		}
		.tab{
		width: 100%;
		text-align: center;
		>tr{
			border-bottom: 1px solid #EBEEF5;
			height: 50px;
			background: white;
		}
		>tr:hover{
			background: #f5f7fa;
		}
	}
		.PageBox{
			width: 500px;
			margin: 0 auto;
			margin-top: 80px;
		}
	}

</style>